import React, { JSX } from 'react';
import { NulDialog, NulCommonOperations, NulFormItem } from '../../components/NulDialog';
import { TextField, Typography } from '@mui/material';
import { useAppDispatch } from '../../actions/hook';
import '@fontsource/open-sans';
import { CommodityEntry, modifyCommodity } from '../../actions/CommodityManagement';

interface ModifyCommodityProps {
  open: boolean;
  onClose: () => void;
  commodityEntry: CommodityEntry;
}

function ModifyCommodity(props: ModifyCommodityProps): JSX.Element {

  const { open, onClose, commodityEntry } = props;

  const [name, setName] = React.useState<string>(commodityEntry.name);
  const [wholesalePrice, setWholesalePrice] = React.useState<number>(commodityEntry.wholesalePrice);
  const [retailPrice, setRetailPrice] = React.useState<number>(commodityEntry.retailPrice);
  const [costPrice, setCostPrice] = React.useState<number>(commodityEntry.costPrice);
  const [notes, setNotes] = React.useState<string>(commodityEntry.notes);

  React.useEffect(() => {
    setName(commodityEntry.name);
    setWholesalePrice(commodityEntry.wholesalePrice);
    setRetailPrice(commodityEntry.retailPrice);
    setCostPrice(commodityEntry.costPrice);
    setNotes(commodityEntry.notes);
  }, [commodityEntry]);

  const dispatch = useAppDispatch();

  const onModifyClicked = () => {
    dispatch(modifyCommodity({
      id: commodityEntry.id,
      name, wholesalePrice, retailPrice, costPrice, notes
    }));
    onClose();
  };

  return (
    <NulDialog
      open={open}
      onClose={onClose}
      title='Edit Commodity'
      operations={
        <NulCommonOperations
          onPositiveClicked={onModifyClicked}
          onNegativeClicked={onClose}
          positiveText='Modify'
        />
      }
    >
      <NulFormItem hint='ID' necessary={false} component={
        <Typography>{commodityEntry.id}</Typography>
      } />
      <NulFormItem hint='Name' component={
        <TextField placeholder='Name' fullWidth={true} size='small' value={name} onChange={(event) => { setName(event.target.value); }} />
      } />
      <NulFormItem hint='WholesalePrice' component={
        <TextField placeholder='WholesalePrice' fullWidth={true} size='small' value={wholesalePrice} onChange={(event) => { setWholesalePrice(parseFloat(event.target.value)); }} />
      } />
      <NulFormItem hint='RetailPrice' component={
        <TextField placeholder='RetailPrice' fullWidth={true} size='small' value={retailPrice} onChange={(event) => { setRetailPrice(parseFloat(event.target.value)); }} />
      } />
      <NulFormItem hint='CostPrice' component={
        <TextField placeholder='CostPrice' fullWidth={true} size='small' value={costPrice} onChange={(event) => { setCostPrice(parseFloat(event.target.value)); }} />
      } />
      <NulFormItem necessary={false} hint='Notes' component={
        <TextField placeholder='Notes' fullWidth={true} size='small' value={notes} onChange={(event) => { setNotes(event.target.value); }} />
      } />
    </NulDialog>
  )
}
export { ModifyCommodity }